import Vue from 'vue'
import Vuex from 'vuex'
// 导入axios创建的实例对象request
import request from '@/request/request.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 列表数据
    list: [],
    // 输入框的值
    inputValue: '',
    // 新的id
    newId: 5,
    // radio单选框的值
    radioValue: 'all'
  },
  // mutations中的函数可以修改state中的数据
  mutations: {
    listInfo(state, list) {
      state.list = list
    },
    setInputValue(state, inputValue) {
      state.inputValue = inputValue
    },
    // 添加新的事项
    addTipsToList(state) {
      // 定义一个列表项信息对象
      const infos = {
        id: state.newId,
        // state中的inputValue跟输入框的值是双向绑定的
        info: state.inputValue.trim(),
        done: false
      }
      // 将列表项对象，添加到state的list中
      state.list.push(infos)
      // 添加完后将newId的值自增1
      state.newId++
      // 将输入框的值清空
      state.inputValue = ''
    },
    // 删除事项
    removeItem(state, id) {
      // 通过findIndex()方法查找对应id的元素的下标，如果没有找到则返回-1
      const index = state.list.findIndex((item) => {
        return item.id === id
      })
      // 如果index不等于-1表示找到了对应id的下标
      if (index !== -1) {
        // 将该下标对应的元素删除,arr.splice(开始位置，删除的个数)
        state.list.splice(index, 1)
      }
    },
    // 获取最新的复选框的值
    getNewCheckValue(state, id, check) {
      const index = state.list.findIndex((item) => {
        return item.id === id
      })
      if (index !== -1) {
        state.list.done = check
      }
    },
    // 清除所有已完成的事项
    cleanDone(state) {
      state.list = state.list.filter((item) => {
        return item.done === false
      })
    },
    // 设置单选框的值
    setRadio(state, radioValue) {
      state.radioValue = radioValue
      // console.log(state.radioValue)
    }
  },
  // 处理（书写）异步任务的地方
  actions: {
    async getList(context) {
      const { data: res } = await request.get('/list.json')
      console.log(res)
      context.commit('listInfo', res)
    }
  },
  // 对state中的数据进行包装
  getters: {
    unDoneLength(state) {
      return state.list.filter((item) => {
        return item.done === false
      }).length
    },
    // 通过radio的label值对列表进行包装
    infoList(state) {
      switch (state.radioValue) {
        case 'all':
          return state.list
        case 'complete':
          return state.list.filter((item) => {
            return item.done === true
          })
        case 'unfinished':
          return state.list.filter((item) => {
            return item.done === false
          })
        default:
          return state.list
      }
    }
  },
  modules: {}
})
